<template>
    <div :class="iframeStyle" :style="{ paddingLeft }">
        <!-- 左侧菜单栏 -->
        <MenuLeft ref="MenuLeft" :menuOpen="menuOpen"></MenuLeft>

        <!-- 顶栏菜单 -->
        <TopBar
            @openDialog="permissionVisible = true"
            :menuOpen="menuOpen"
            @click="visibleMenu"
            @personalityShow="personalityShow"
        >
            <!-- 顶栏标签路由 -->
            <WorkTab v-show="showWorkTab" />
        </TopBar>

        <!-- 主体区域 -->
        <div :class="containerStyle">
            <BaseChoice></BaseChoice>
            <ProcessChoice></ProcessChoice>
            <SlaughterChoice></SlaughterChoice>
            <keep-alive v-if="isRouterAlive">
                <transition :name="transitionName">
                    <router-view class="child-view"></router-view>
                </transition>
            </keep-alive>
        </div>
        <!-- 个性化设置 -->
        <Personality
            @click="personalityShow"
            :show="showpersonality"
            @closePersonality="closePersonality"
        ></Personality>
    </div>
</template>

<script>
import { mapState } from "vuex";
import SlaughterChoice from "@/components/Slaughter/SlaughterChocie.vue";
import ProcessChoice from "@/components/Process/ProcessChocie.vue";
export default {
    name: "Home",

    components: {
        SlaughterChoice,
        ProcessChoice,
    },

    data() {
        return {
            // 菜单栏是否展开
            menuOpen: true,
            // 个性化设置抽屉可见性
            showpersonality: false,
            isRouterAlive: true, // KeepAlive
            transitionName: "slide-left",
        };
    },
    provide() {
        return {
            reload: this.reload,
        };
    },
    computed: {
        ...mapState({
            usersetting: (state) => state.Usersetting.setting,
            Worktab: (state) => state.worktab,
            showWorkTab: (state) => state.Usersetting.showWorkTab,
        }),
        paddingLeft() {
            return this.menuOpen ? "250px" : "70px";
        },
        iframeStyle() {
            //当不显示历史访问标签时修改样式
            if (this.showWorkTab) {
                return "frame";
            } else {
                return "frame otherFirst";
            }
        },
        containerStyle() {
            //当不显示历史访问标签时修改样式
            if (this.showWorkTab) {
                return "container";
            } else {
                return "container otherSecond";
            }
        },
    },
    watch: {
        $route(to, from, next) {
            let pathArray = to.path.split("/");
            let last = pathArray.length - 1;
            if (
                //这三个页面不出现历史访问标签
                pathArray[last] === "BreedShow" ||
                pathArray[last] === "ProcessingShow" ||
                pathArray[last] === "SlaughterhouseShow"
            ) {
                this.$store.commit("setshowWorkTab", false);
            } else {
                this.$store.commit("setshowWorkTab", true);
            }
            if (!window.sessionStorage.getItem("worktab")) {
                return;
            }
            let opd = JSON.parse(sessionStorage.getItem("worktab")).opened;
            this.transitionName =
                opd.indexOf(to.path) > opd.indexOf(from.path)
                    ? "slide-left"
                    : "slide-right";
        },
    },
    created() {
        this.initsetting();
        this.openedrouter();
    },
    methods: {
        // 初始化用户的个性设置 这个如果有后端接口之后得改
        initsetting() {
            // 这里是判断localstorage中是否有usersetting
            if (window.localStorage.getItem("usersetting")) {
                // 存在得话将localstorage中得值取下来赋值给vuex中的usersetting
                let that = JSON.parse(localStorage.getItem("usersetting"));
                this.$store.dispatch("setUpTheme", that.theme);
                this.$store.dispatch("setLeftMenuUniqueOpened", {
                    show: that.uniqueOpened,
                });
                this.$store.dispatch("setLeftMenuButton", {
                    show: that.showMenuButton,
                });
                this.$store.dispatch("setLeftMenuCrumbs", {
                    show: that.showCrumbs,
                });
                this.$store.dispatch("setThemeModel", that.themeModel);
                this.$store.dispatch("setshowAvatar", {
                    show: that.showAvatar,
                });
            } else {
                // 这是用户localstorage中没有usersetting才会被调用
                window.localStorage.setItem(
                    "usersetting",
                    JSON.stringify(this.usersetting)
                );
            }
        },
        // 用户已打开路由保存在sessionstorage，防止刷新丢失
        openedrouter() {
            if (window.sessionStorage.getItem("worktab")) {
                this.$store.dispatch(
                    "worktabinitState",
                    JSON.parse(sessionStorage.getItem("worktab"))
                );
            }
        },
        // 菜单栏展开收缩
        visibleMenu() {
            this.menuOpen = !this.menuOpen;
            this.$refs.MenuLeft.visibleMenu();
        },
        // 展开个性化设置抽屉
        personalityShow() {
            this.showpersonality = !this.showpersonality;
        },
        // 关闭个性化抽屉
        closePersonality() {
            this.showpersonality = false;
        },
        // 刷新
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.otherFirst {
    padding-top: 4.65rem !important;
}
.otherSecond {
    width: 100% !important;
}
.frame {
    $default-background: #f6f7f9;
    width: 100%;
    padding: 8.5rem 0 1rem 0;
    box-sizing: border-box;
    transition: padding 0.3s ease-in-out;
    min-height: 100vh;
    // overflow: hidden;
    background: $default-background;
    .container {
        width: calc(100% - 30px);
        min-height: 100%;
        margin: auto;
        box-sizing: border-box;

        // 子页面默认style
        >>> .page-content {
            min-height: calc(100vh - 120px);
            background: #fff;
            padding: 16px;
            position: relative;
            box-sizing: border-box;
            border-radius: 3px;

            >>> .open-head-btn {
                width: 100%;
                height: 15px;
                cursor: pointer;
                user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: auto;
                z-index: 999;
                text-align: center;
                font-size: 12px;
                color: #eee;
            }
        }
    }
}

.child-view {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s cubic-bezier(1, 1, 0, 0);
}
.slide-left-enter,
.slide-right-leave-active {
    opacity: 0.5;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
    opacity: 0.5;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}
</style>
  